<template>
  <li class="todo-item flex items-center gap-2 px-2 py-4 bg-[#f1f1f1] shadow-xl group">
    <input
      class="appearance-none w-5 h-5 bg-white rounded-full shadow checked:bg-[#41b080]"
      type="checkbox"
      :checked="todo.isCompleted"
      @input="$emit('toggle-complete', index)"
    />
    <div class="flex flex-1">
      <input
        class="flex-1 py-1 px-2 border-2 border-solid border-[#41b080]"
        v-if="todo.isEditing"
        type="text"
        v-model="title"
      />
      <span v-else :class="{ 'line-through': todo.isCompleted }">
        {{ todo.title }}
      </span>
    </div>
    <div class="group-hover:opacity-100 flex items-center gap-2 opacity-0 transition-opacity">
      <i
        v-if="todo.isEditing"
        class="i-ph:check-circle cursor-pointer w-6 text-[#41b080]"
        @click="$emit('toggle-edit', index)"
      ></i>
      <i
        v-else
        class="i-ph:pencil-fill cursor-pointer w-6 text-[#41b080]"
        @click="$emit('toggle-edit', index)"
      ></i>
      <i
        class="i-ph:trash cursor-pointer w-6 text-[#f95e5e]"
        @click="$emit('delete-todo', todo.id)"
      ></i>
    </div>
  </li>
</template>

<script setup lang="ts">
defineProps({
  todo: {
    type: Object,
    required: true
  },
  index: {
    type: Number,
    required: true
  }
})

const title = defineModel({ type: String })

defineEmits(['toggle-complete', 'toggle-edit', 'delete-todo'])
</script>
